<template>
    <el-table :data="resultTableData" border height="200px" max-height="250" empty-text="暂无可下载内容" style="width: 100% ;">
        <el-table-column label="时间" width="240">
            <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.time }}</span>
            </template>
        </el-table-column>
        <el-table-column label="结果文件" width="220">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>{{ scope.row.url }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column label="大小" width="150">
            <template slot-scope="scope">
                <span>{{ scope.row.size }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="right">
            <template slot-scope="scope">
                <el-button size="mini" @click="download(scope.row.name)">下载</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import recognizeApi from "@/api/requestapi";
export default {
    name: "GetResult",
    props: {
      fileName: String
    },
    data() {
        return {
            resultTableData: [
               
            ],
        };
    },
    methods: {
       handleProcessCompleted() {
            // 在这里调用你想要执行的方法
            recognizeApi
            .sendDownloadList(this.fileName)
            .then((response) => {
              this.resultTableData = response.data
            });
        },
      download(fileName) {
         recognizeApi
        .sendDownloadVideo(fileName)
        .then((response) => {
          // 从响应头获取内容类型
            const contentType = response.headers["content-type"];

            // 创建一个Blob对象
            const blob = new Blob([response.data], { type: contentType });

            // 创建一个下载链接
            const url = window.URL.createObjectURL(blob);

            // 创建一个虚拟的链接元素并触发点击以下载文件
            const a = document.createElement("a");
            a.style.display = "none";
            a.href = url;
            a.download = fileName; // 如果有原始文件名，则使用原始文件名
            document.body.appendChild(a);
            a.click();

            // 释放资源
            window.URL.revokeObjectURL(url);
        })
        .catch((error) => {
          console.error("下载视频失败", error);
        });
       },
    },
};

</script>

<style></style>